<template>
  <!--贵宾通道（从商城进来）-->
  <div>
    <div class="header">
      <div class="cityName" @click="toggle"><span>{{cityName}}</span><img src="../../assets/select.png" alt="" width="12">
      </div>
      <ul v-show="isShow" class="cityList">
        <li v-for="(item,index) in cityList" @click="check(item.cityName)">{{item.cityName}}</li>
      </ul>
      <div class="search"><input type="text" placeholder="贵宾通道/名称/关键字" v-model="goodsName"><img src="../../assets/search.png" alt="" width="16" @click="goSearch(goodsName)"></div>
    </div>
    <ul class="tuijianlist">
      <li v-for="item in goodsList" @click="goGoodsDetail(item.goodsId)">
        <img :src="item.coverImg | imgPathFilter" alt="" width="100%" height="170px" style="object-fit:cover">
        <div>
          <p>{{item.goodsName}}</p>
          <span v-if="isOld"><p>{{item.vipPrice}}元</p> </span>
          <span v-else><p>{{item.goodsPrice}}元</p></span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getGoodsList} from '../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: 'only',
    props: {},
    data() {
      return {
        goodsList: [],
        isShow: false,
        cityName: '城市',
        cityList: ['北京', '上海', '郑州'],
        categoryId: '',
        goodsName: '',
        isOld: false
      };
    },
    methods: {
      toggle(){
        this.isShow = !this.isShow
      },
      check(cityName){
        this.cityName = cityName;
        this.isShow = !this.isShow;
        let params = {categoryId: this.categoryId, cityName: cityName};
        this.getGoodsListData(params);
      },
      getGoodsListData(params){
        var that = this;
        getGoodsList(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.isOld = res.object.isOld;
            that.goodsList = res.object.goodsList;
            that.cityList = res.object.cityList;
          } else {
            Toast.fail(res.info);
          }
        })
      },
      goSearch(goodsName){
        var cityName = this.cityName;
        let params = {categoryId: this.categoryId, goodsName: goodsName, cityName: cityName};
        if (cityName == '城市') {
          params = {categoryId: this.categoryId, goodsName: goodsName};
        }
        this.getGoodsListData(params);
      },
      goGoodsDetail(goodsId){
        this.$router.push({path: 'tongdaodetail', query: {goodsId: goodsId}})
      }
    },
    created() {
      this.categoryId = this.$route.query.categoryId;
      let params = {categoryId: this.categoryId};
      this.getGoodsListData(params);
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  input::-webkit-input-placeholder {
    color: #999;
    font-size: 14px;
  }

  .header {
    display: flex;
    padding: 10px;
    position: relative;
    margin-bottom: 10px;
    overflow: visible;
    z-index: 2;
    .cityList {
      position: absolute;
      width: 88%;
      top: 75px;
      left: 10px;
      right: 10px;
      text-align: left;
      padding: 10px;
      border: 1px solid #eee;
      background-color: #fff;
    }
    .cityName, .search input {
      border: 1px solid #eee;
      box-shadow: 0 3px 4px rgba(17, 17, 17, 0.05);
      border-radius: 7px;
      height: 25px;
      line-height: 25px;
      padding: 10px;
      color: #111;
    }
    .cityName {
      flex: 0 100px;
      margin-right: 10px;
      img {
        float: right;
        margin-top: 17px;
      }
    }
    .search {
      position: relative;
      width: calc(100% - 110px);
      input {
        width: 90%;
      }
      img {
        position: absolute;
        right: 20px;
        top: 16px;
      }
    }
  }

  .tuijianlist{
    text-align: left;
    padding: 10px 0 50px 10px;
    li{
      display: inline-block;
      width: calc(50% - 13px);
      font-size: 0;
      margin-bottom: 13px;
      margin-right: 10px;
      img{
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        height: 114px;
      }
      div{
        border:1px solid #eee;
        border-top:none;
        box-shadow: 0px 5px 15px -9px rgba(0,0,0,0.5);
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        text-align: left;
        padding: 10px;
        p:first-child{
          font-size: 15px;
          color: #333;
        }
        p:last-child{
          font-size: 17px;
          color: #ff7f00;
        }
      }

    }
  }
</style>
